<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #output{
            height: 200px;
            overflow: auto;
        }
        #output li{
            float: left;
            clear: both;
        }
        #output li.active{
            float: right;
            background: yellow;
        }

    </style>
</head>
<body>
    <ul id="output">
    </ul>
    <input type="text" id="reqBox">
    <button>发送</button>
    <script>
        var questionArr = ['你好', '在干嘛', '吃了吗', '发个照片过来看看', '有空吗']
        var answerArr = ['你好', '没干嘛', '睡了', '滚', '去洗澡了，下次一定']

        var reqBox = document.getElementById('reqBox')
        var btnBox = reqBox.nextElementSibling
        var output = document.getElementById('output')
        // 当点击按钮时，将文本框的内容，去匹配对应的答案
        btnBox.onclick = function () {
            var req = reqBox.value
            var li = document.createElement('li')
            li.innerText = req
            li.className = 'active'
            output.appendChild(li)
            reqBox.value = ''
            reqBox.focus() //自动聚焦
            var answer
            var idx = questionArr.indexOf(req)
            if (idx !== -1) {
                answer = answerArr[idx]
            } else {
                answer = '我好像不太理解您的意思'
            }
            setTimeout(function(){
                var li = document.createElement('li')
                li.innerText = answer
                output.appendChild(li)
            }, 1000)
            
        }
    </script>
</body>
</html>